<template>
  <div class="container">
    <el-dialog title="题目预览" :visible.sync="dialogFormVisible">
      <el-row :gutter="20">
        <el-col :span="6">
          <span>【题型】:</span>
          <span>{{
            genderList.questionType === "1"
              ? "单选"
              : genderList.questionType === "2"
              ? "多选"
              : genderList.questionType === "3"
              ? "简答"
              : null
          }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:</span>
          <span>{{ genderList.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】:</span>
          <span>{{
            genderList.difficulty === "1"
              ? "简单"
              : genderList.difficulty === "2"
              ? "一般"
              : genderList.difficulty === "3"
              ? "困难"
              : null
          }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:</span>
          <span>{{ genderList.tags }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <span>【学科】:</span>
          <span>{{ genderList.subjectID }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】:</span>
          <span>{{ genderList.catalogID }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】:</span>
          <span>{{ genderList.direction }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <span>【题干】:</span>
          <span v-html="genderList.question" style="color: blue"></span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <span>题型</span>选项:(以下选中的选项为正确答案)
          <div v-for="item in genderList.options" :key="item.id">
            {{ item.title }}
            <el-checkbox
              :checked="item.isRight === 0 ? false : true"
              disabled
              >{{ item.code }}</el-checkbox
            >
            <span><img :src="item.img" alt="" /></span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <span>【参考答案】:&nbsp;</span>
          <el-button type="danger" size="small" @click="video = !video"
            >视频答案预览</el-button
          >
          <video
            v-if="video"
            :src="genderList.videoURL"
            controls
            autoplay
            class="video"
            ref="dialogVideo"
            width="100%"
          ></video>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <span>【答案解析】:&nbsp;&nbsp;</span>
          <span v-html="genderList.answerID"></span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <span>【题目备注】:&nbsp;&nbsp;</span>
          <span>{{ genderList.remarks }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" class="close">
          <el-button type="primary" @click="closeDialog">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'questionsPreview',
  props: ['genderList'],
  data () {
    return {
      dialogFormVisible: false,
      video: false
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    },
    closeDialog () {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
}
.close {
  display: flex;
  justify-content: flex-end;
}
</style>
